<%@ include file="../views/taglib.jsp" %>
<style>
	.newPsswordStyleColor {
		color: red;
	}
</style>

<style>
	.error {
		color: #ff0000;
		font-size: italic;
		font-weight: bold;
	}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		function getExtension(filename){
			var parts = filename.split('.');
			return parts[parts.length - 1];
		}

		function isImage(filename){
			var ext = getExtension(filename);
			switch (ext.toLowerCase()){
				case 'jpg':
				case 'png':
				case 'bmp':
				case 'gif':
					return true;
			}
			return false;
		}
		
		$("#fileUpload").bind('change', function(){
			var filename = this.files[0].name;
			console.log(filename);
			if(!isImage(filename)){
				document.getElementById("file_upload_message").innerHTML = "Sorry ! Choose type image: jpn, png, gif, bmp";
				document.getElementById("file_upload_message").style.color = "red";
				document.getElementById("button_save").disabled = true;
			} else {
				var size = this.files[0].size;
				if(size > 524288){
					document.getElementById("file_upload_message").innerHTML = "Sorry ! Size of file upload < 500 KB";
					document.getElementById("file_upload_message").style.color = "red";
					document.getElementById("button_save").disabled = true;
				} else {
					document.getElementById("file_upload_message").innerHTML = "Ok ! You can upload your file";
					document.getElementById("file_upload_message").style.color = "green";
					document.getElementById("button_save").disabled = false;
				}
			}
		});
	});
</script>

<script>
	$(document).ready(function(){
		$(".updateProfile").validate({
			rules: {
				cardnumberid: {
					required: true,
					remote : {
						url : "<c:url value='/create/checkcardnumber'/>",
						type: 'post',
						data: {
							cardnumberid: function(){
								return $("#cardnumberid").val();
							}
						}
					}
				},
				passwordNew: {
					required: false,
					minlength : 8,
				},
				passwordNewAgain: {
					required: false,
					minlength : 8,
					equalTo: "#passwordNew"
				},
				firstname: {
					required : true,
					remote : {
						url: "<c:url value='/create/checkfirstname' />",
						type: 'post',
						data: {
							firstname: function(){
								return $("#firstname").val();
							}
						}
					}
				},
				lastname: {
					required : true,
					remote : {
						url: "<c:url value='/create/checklastname' />",
						type: 'post',
						data: {
							lastname: function(){
								return $("#lastname").val();
							}
						}
					}
				},
				midname: {
					required : false,
					remote : {
						url: "<c:url value='/create/checkmidname' />",
						type: 'post',
						data: {
							midname: function(){
								return $("#midname").val();
							}
						}
					}
				},
				phone1:{
					required: true,
					remote: {
						url: "<c:url value='create/checkphonefirst' />",
						type: 'post',
						data: {
							phone1: function(){
								return $("#phone1").val();
							}
						}
					}
				},
				phone2:{
					required: false,
					remote: {
						url: "<c:url value='create/checkphonesecond' />",
						type: 'post',
						data: {
							phone2: function(){
								return $("#phone2").val();
							}
						}
					}
				},
				address1: {
					required: true
				},
				email1 : {
					required : true,
					email : true
				},
				email2 : {
					required : false,
					email : true
				}
			},
			messages : {
				cardnumberid: {
					remote: "Card number Id must 9 numberic. Example: 135548878"
				},
				firstname: {
					remote : "Name only contains words"
				},
				lastname: {
					remote : "Name only contains words"
				},
				midname: {
					remote : "Name only contains words"
				},
				phone1 : {
					remote : "Phone only digit 10 or 11 number"
				},
				phone2 : {
					remote : "Phone only digit 10 or 11 number"
				}
			}
		});
	});
</script>

<h2 class="text-info text-center">Your Profile</h2>
<c:if test="${not empty message}">
	<div class="alert alert-success">${message}</div>
</c:if>

<form:form cssClass="form-horizontal updateProfile" role="form" action="${pageContext.request.contextPath}/profile/update" modelAttribute="usertempnew" method="post" enctype="multipart/form-data">
 
   <form:hidden cssClass="form-control" path="id" value="${user.id}" />
 	
   <form:hidden cssClass="form-control" path="image" value="${user.image}" />
  
   <form:hidden cssClass="form-control" path="password" value="${user.password}" />
   
   <form:hidden cssClass="form-control" path="roleId" value="${user.role.roleid}"/>
   
   <form:hidden cssClass="form-control" path="statusId" value="${user.status.statusid}"/>
   
   <div class="form-group">
     <label for="inputLoginId" class="col-sm-2 control-label">Avatar</label>
        <div class="col-xs-3">
        <a href="#" class="thumbnail" >
             <img src="data:image/jpeg;base64,${avatar}" class="img-rounded" width="200" height="200">
        </a>
    </div>
    </div>
   <div class="form-group" >
    <label for="inputLoginId" class="col-sm-2 control-label">Login Id</label>
    <div class="col-sm-6">
      <form:input onchange="false" readonly="true" path="loginId" class="form-control" value="${user.loginId}"/>
      <form:errors path="loginId" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputIdNewPassword" class="col-sm-2 control-label newPsswordStyleColor">New Password</label>
    <div class="col-sm-6">
      <input type="password" class="form-control" name="passwordNew" id="passwordNew"/>
      <form:errors path="password" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputIdNewPassword" class="col-sm-2 control-label newPsswordStyleColor">Password Again</label>
    <div class="col-sm-6">
      <input type="password" class="form-control" name="passwordNewAgain" id="passwordNewAgain"/>
      <form:errors path="password" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputIdCardNumber" class="col-sm-2 control-label">Id Card Number</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="cardnumberid" value="${user.cardnumberid}"/>
      <form:errors path="cardnumberid" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputFirstName" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="firstname" value="${user.firstname}"/>
      <form:errors path="firstname" cssClass="error"/>
    </div>
  </div>
   <div class="form-group">
    <label for="inputLastName" class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="lastname" value="${user.lastname}"/>
      <form:errors path="lastname" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputMiddleName" class="col-sm-2 control-label">Middle Name</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="midname" value="${user.midname}"/>
      <form:errors path="midname" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone1" class="col-sm-2 control-label">Phone 1 *</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="phone1" value="${user.phone1}"/>
      <form:errors path="phone1" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone2" class="col-sm-2 control-label">Phone 2</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="phone2" value="${user.phone2}"/>
      <form:errors path="phone2" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress1" class="col-sm-2 control-label">Address 1*</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="address1" value="${user.address1}"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress2" class="col-sm-2 control-label">Address 2</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="address2" value="${user.address2}"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail1" class="col-sm-2 control-label">Email 1*</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="email1" value="${user.email1}"/>
      <form:errors path="email1" cssClass="error"/>
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail2" class="col-sm-2 control-label">Email 2</label>
    <div class="col-sm-6">
      <form:input cssClass="form-control" path="email2" value="${user.email2}"/>
      <form:errors path="email2" cssClass="error"/>
    </div>
  </div>
  <security:authorize access="hasAnyRole('ROLE_ADMIN', 'ROLE_SUPPORT')">
  <div class="form-group">
    <label for="inputAvatar" class="col-sm-2 control-label">Avatar</label>
    <div class="col-sm-6">
      <input type="file" class="filestyle" name="fileUpload" id="fileUpload" data-buttonName="btn-primary">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAvatar" class="col-sm-6 control-label" id="file_upload_message"></label>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default btn-success" id="button_save"><span class="glyphicon glyphicon-saved"></span> Update</button>
    </div>
  </div>
  </security:authorize>
</form:form>

</body>
</html>